import { CheckCircleTwoTone, CloseCircleTwoTone } from '@ant-design/icons-vue'
import { Col, Row, Space, Spin, TypographyText } from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'

import questionApi from '@/apis/questionApi'
import { AnswerItem, AnswerOptionItem } from '@/apis/questionTypes'
import boxChecked from '@/static/box_checked.png'
import boxNormal from '@/static/box_normal.png'
import radioChecked from '@/static/radio_checked.png'
import radioNormal from '@/static/radio_normal.png'

export default defineComponent({
  name: 'ResultList',
  props: {
    activityId: {
      type: [String, Number],
      required: true
    },
    memberId: {
      type: [String, Number],
      required: true
    }
  },
  setup(props) {
    const loading = ref(false)
    const answerData = ref([] as AnswerItem[])

    onMounted(() => {
      getDetail()
    })
    //获取详情
    async function getDetail() {
      try {
        loading.value = true
        answerData.value = await questionApi.getAnswerDetail(
          props.activityId,
          props.memberId
        )
        loading.value = false
      } catch (e) {}
    }

    //答案
    function getAnswerList(optionsList: AnswerOptionItem[]) {
      let answer = ''
      optionsList.forEach((item, index) => {
        if (item.isCorrect) {
          answer += `${String.fromCharCode('A'.charCodeAt(0) + index)}. ${
            item.optionDesc
          }    `
        }
      })
      return answer
    }

    //显示错误
    function showErr(questionItem: AnswerItem, optionItem: AnswerOptionItem) {
      if (questionItem.questionType == 1) {
        return (
          (optionItem.isCorrect && !optionItem.isUserOption) ||
          (!optionItem.isCorrect && optionItem.isUserOption)
        )
      } else {
        return !questionItem.isCorrect && optionItem.isUserOption
      }
    }

    return {
      loading,
      answerData,
      boxNormal,
      boxChecked,
      radioChecked,
      radioNormal,
      getAnswerList,
      showErr
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Space>
          <view>{`${this.answerData?.length}道题`}：</view>
          <div>
            {<CheckCircleTwoTone twoToneColor="#52c41a" />}
            {' ' + this.answerData?.filter(item => item.isCorrect).length}
          </div>
          <div style={{ marginLeft: '10px' }}>
            <CloseCircleTwoTone twoToneColor="#ff4d4f" />
            {' ' + this.answerData?.filter(item => !item.isCorrect).length}
          </div>
        </Space>
        <div>
          <Space
            direction="vertical"
            style={{
              width: '600px',
              marginTop: '20px'
            }}
            size="large"
          >
            {this.answerData?.map((questionItem, index) => {
              return (
                <Row>
                  <Col span={20}>
                    <h3>{`${index + 1}. ${questionItem.question}`}</h3>

                    <Space direction="vertical" style={{ marginLeft: '20px' }}>
                      {questionItem.optionList.map((optionItem, index) => {
                        let imageSrc
                        if (optionItem.isUserOption) {
                          imageSrc =
                            questionItem.questionType == 1
                              ? this.boxChecked
                              : this.radioChecked
                        } else {
                          imageSrc =
                            questionItem.questionType == 1
                              ? this.boxNormal
                              : (imageSrc = this.radioNormal)
                        }
                        return (
                          <div
                            style={{ display: 'flex', alignItems: 'center' }}
                          >
                            <img
                              style={{ width: '18px', height: '18px' }}
                              src={imageSrc}
                            ></img>
                            <TypographyText
                              style={{ maxWidth: '400px', marginLeft: '5px' }}
                            >
                              {`${String.fromCharCode(
                                'A'.charCodeAt(0) + index
                              )}. ${optionItem.optionDesc}`}
                            </TypographyText>
                            <CloseCircleTwoTone
                              v-show={this.showErr(questionItem, optionItem)}
                              twoToneColor="#ff4d4f"
                              style={{
                                marginLeft: '20px'
                              }}
                            />
                          </div>
                        )
                      })}
                      {!questionItem.isCorrect ? (
                        <Space direction="vertical">
                          <TypographyText type="success">
                            正确答案
                          </TypographyText>
                          <view style={{ whiteSpace: 'pre-wrap' }}>
                            {this.getAnswerList(questionItem.optionList)}
                          </view>
                        </Space>
                      ) : (
                        ''
                      )}
                    </Space>
                  </Col>
                </Row>
              )
            })}
          </Space>
        </div>
      </Spin>
    )
  }
})
